import React from 'react';
import { connect } from 'umi';
import { Helmet, HelmetProvider } from 'react-helmet-async';
import styles from './index.less';
import { DefaultFooter } from '@ant-design/pro-layout';
import logo from '@/assets/logo.svg';
import LoginForm from './components/LoginForm';

const Login = (props) => {
  const { title, copyright } = props.settings;

  return (
    <HelmetProvider>
      <Helmet>
        <title>{title}</title>
      </Helmet>
      <div className={styles.container}>
        <div className={styles.content}>
          <div className={styles.panel}>
            <h1 className={styles.header}>
              <img alt="logo" className={styles.logo} src={logo} />
              {title}
            </h1>
            <LoginForm />
          </div>
        </div>
        <DefaultFooter copyright={copyright} links={null} />
      </div>
    </HelmetProvider>
  );
};

export default connect(({ settings }) => ({ settings }))(Login);
